<!DOCTYPE html>
	<html>

	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no, minimal-ui">
		<link href="resources/css/mui.min.css" rel="stylesheet" />
		<link href="resources/css/common1.css" rel="stylesheet" />
		<link href="resources/css/swiper.css" rel="stylesheet" />
		<script src="resources/js/swiper.js"></script>
		<script src="resources/js/jquery-1.10.1.min.js"></script>
		<script src="resources/js/common.js"></script>
		<script src="resources/js/vue.min.js"></script>
		<title>超贷</title>
		<style>
			.swiper-container {		      width: 100%;		      height: auto;		      margin-left: auto;		      margin-right: auto;		    }
		    .swiper-slide {		      text-align: center;		      font-size: 18px;		      background: #fff;		      margin-right: 2px !important;		      display: -webkit-box;		      display: -ms-flexbox;		      display: -webkit-flex;		      display: flex;		      -webkit-box-pack: center;		      -ms-flex-pack: center;		      -webkit-justify-content: center;		      justify-content: center; -webkit-box-align: center; -ms-flex-align: center; -webkit-align-items: center; align-items: center;}
		    .swiper-slide img{width: 100%; height: auto;}
		    .headerScherBox{width: 100%; position: fixed; top: 0px; z-index: 999; height: 60px;padding: 0px 10px; background-color: #FFFFFF;}
		    .headerScherBox2{width: 100%; position: fixed; top: 0px; z-index: 999; height: 60px;padding: 0px 10px; background-color: #2487ff;}
		    .headerScher{ height:30px; border-radius: 15px; line-height: 30px; margin-top: 15px; background-color: #eee; position: relative; width:90%; float: left;}
			.headerScher input{width: 95%;border-radius: 15px; font-size: 12px; background-color: #eee; height: 100%; line-height: 100%; border: 0px; padding-left: 32px;}
			.headerScher img{position: absolute; width: 18px; left: 10px; top:6px;}
			.headerScherBox2 .headerScher{ height:30px; border-radius: 15px; line-height: 30px; margin-top: 15px; background-color: #fff; position: relative; width:90%; float: left;}
			.headerScherBox2 .headerScher input{width: 95%;border-radius: 15px; font-size: 12px; background-color: #ffffff; height: 100%; line-height: 100%; border: 0px; padding-left: 32px;}
			
			.headerMsg{width: 10%; height: 60px; float: left; text-align: right;}
			.headerMsg img{width: 28px;  margin-top: 16px;}
			.listLogo{background-color: #fff; padding-top: 10px;}
			.listLogo img{width: 60%;}
			.listLogo .mui-row{ text-align: center; border-bottom: 1px solid #eee;}
			.marqueeBox{width: 100%; padding: 0px 10px; height: 40px; line-height: 40px;}
			.marqueeLogo{float: left; padding-left: 22px; position: relative; width: 60px; height: 40px; background-color: #fff;}
			.marqueeLogo img{ width: 18px; left: 0px; top:10px;  position: absolute; margin-right: 5px;}
			.marqueeTit{ width:calc(100% - 60px); float: left; height: 24px; margin-top: 8px; overflow: hidden;}
			.marqueeTit marquee{width: 100%; line-height: 30px;}
			.marqueeTit marquee p{margin: 0; width: 100%; padding: 0; height: 25px;overflow: hidden; white-space: nowrap; text-overflow: ellipsis}
			.newTit2 span{font-size: 12px; border:1px solid #EEEEEE; color: #6c747d; padding: 2px 3px; margin-right: 15px;}
			
			.moreTit{margin-right: 30px; font-size: 12px; margin-top: 1px;}
			.newTit{margin-right: 15px; font-size: 12px; margin-top: 1px;}
			.newDeail{text-align: center; padding: 8px 0px;}
			.newDeail p{ margin-bottom: 0px; height: 20px;}
			.hotTit img, .newImg{border-radius: 3px;}
			.headerTop{ height: 60px;}
		</style>

	</head>

	<body>
		<div id="app">
			<div class="headerScherBox">
				<div class="headerScher">
					<input type="text" placeholder="人人贷"><img src="resources/images/indexSeach.png"></div>
				<div class="headerMsg"><img src="resources/images/indexMsg.png"></div>
			</div>
			<div class="headerTop"></div>

			<div class="swiper-container">
				<div class="swiper-wrapper">
					<div class="swiper-slide"><img src="resources/images/cdBanner.png"></div>
					<div class="swiper-slide"><img src="resources/images/cdBanner.png"></div>
					<div class="swiper-slide"><img src="resources/images/cdBanner.png"></div>
				</div>
				<!-- Add Pagination 轮播-->
				<div class="swiper-pagination"></div>
			</div>
			<div class="mui-content listLogo">
				<div class="mui-row">
					<div class="mui-col-sm-3 mui-col-xs-3">
						<a>
							<img src="resources/images/indexjs.png">
							<p class="color3">极速放款</p>
						</a>
					</div>
					<div class="mui-col-sm-3 mui-col-xs-3">
						<a>
							<img src="resources/images/indexzx.png">
							<p class="color3">极速放款</p>
						</a>
					</div>
					<div class="mui-col-sm-3 mui-col-xs-3">
						<a>
							<img src="resources/images/indexzm.png">
							<p class="color3">极速放款</p>
						</a>
					</div>
					<div class="mui-col-sm-3 mui-col-xs-3">
						<a>
							<img src="resources/images/indexLx.png">
							<p class="color3">极速放款</p>
						</a>
					</div>
				</div>
				<div class="marqueeBox">
					<div class="marqueeLogo"><img src="resources/images/indexmsgNotice.png">速报</div>
					<div class="marqueeTit">
						<marquee direction="left" scrolldelay="0" scrollamount="2" loop="-1">
							<span>百度有钱花 胡先生成功下款58221元</span>
							<span>百度有钱花 胡先生成功下款58221元</span>
							<span>百度有钱花 胡先生成功下款58221元</span>
						</marquee>
					</div>
				</div>
			</div>
			<!--新人专享-->
			<template v-for="(green,index) in greenHandList"> 
			<template v-if="index < 1">
			<div class="mui-content">
				<ul class="mui-table-view">
					<li class="mui-table-view-cell">
						<a class="mui-navigate-right">
							<b class="font-size14">新人专享</b>
							<span class="mui-pull-right moreTit color4">查看更多</span>
						</a>
					</li>
					<li class="mui-table-view-cell mui-media">
						<a href="javascript:;">
							<img class="mui-media-object mui-pull-left newImg" :src="green.iconUrl">
							<div class="mui-media-body font-size14">
								{{green.name}}
								<span class="mui-pull-right newTit color4"><i class="color2">{{green.totalApplyCount}}</i>人申请通过</span>
								<p class='mui-ellipsis newTit2'><!-- <span>10秒审核</span><span>快速下款</span><span>芝麻分贷</span> -->
									<template v-for="(greenTag,index) in greenTags"> 
										<template v-if="index < 3">
											<span>{{greenTag}}</span>
										</template>
									</template>
								</p>
							</div>
						</a>
					</li>
					<li class="mui-row">
						<div class="mui-col-sm-4 mui-col-xs-4 newDeail">
							<p class="color3">最高额度</p>
							<p class="color2">8000元</p>
						</div>
						<div class="mui-col-sm-4 mui-col-xs-4 newDeail">
							<p class="color4">月参考利息</p>
							<p class="color3">3%</p>
						</div>
						<div class="mui-col-sm-4 mui-col-xs-4 newDeail">
							<p class="color4">放款时间</p>
							<p class="color3">24小时</p>
						</div>
					</li>
				</ul>
			</div>
			</template>
			</template>
			<!--热门推荐-->
			<div class="mui-content">
				<ul class="mui-table-view">
					<li class="mui-table-view-cell">
						<a class="mui-navigate-right">
							<b class="font-size14">热门推荐</b>
							<span class="mui-pull-right moreTit color4">查看更多</span>
						</a>
					</li>
					<li class="mui-row">
						<div class="mui-col-sm-6 mui-col-xs-6 mui-table-view-cell mui-media hotTit" v-for="(hot,index) in hotList">
							<template v-if="(index+1) <= 4">
								<a href="javascript:;">
									<img class="mui-media-object mui-pull-left"  :src="hot.iconUrl">
									<div class="mui-media-body font-size14">
										{{hot.name}}
										<p class='mui-ellipsis'>最高额度<span class="color2">{{hot.averageqQuota}}万</span></p>
									</div>
								</a>
							</template>
						</div>
					</li>
				</ul>
			</div>

			<!--新品推荐-->
			<div class="mui-content">
				<ul class="mui-table-view">
					<li class="mui-table-view-cell">
						<a class="mui-navigate-right">
							<b class="font-size14">新品推荐</b>
							<span class="mui-pull-right moreTit color4">查看更多</span>
						</a>
					</li>
					<li class="mui-row">
						<div class="mui-col-sm-6 mui-col-xs-6 mui-table-view-cell mui-media hotTit" v-for="(latest,index) in latestList">
							<template v-if="(index+1) <= 4">
								<a href="javascript:;">
									<img class="mui-media-object mui-pull-left" :src="latest.iconUrl">
									<div class="mui-media-body font-size14">
										{{latest.name}}
										<p class='mui-ellipsis'>最高额度<span class="color2">{{latest.averageqQuota}}万</span></p>
									</div>
								</a>
							</template>
						</div>
					</li>
				</ul>
			</div>
			<div class="mui-row tabBarBox">
				<li class="active fontS14" onclick="tabBar1()">
					<img src="resources/images/tab-bar11.png">
					<br> 首页
				</li>
				<li class="fontS14" onclick="tabBar2()">
					<img src="resources/images/tab-bar2.png">
					<br>贷款
				</li>
				<li class="fontS14" onclick="tabBar3()">
					<img src="resources/images/tab-bar3.png">
					<br>社区
				</li>
				<li class="fontS14" onclick="tabBar4()">
					<img src="resources/images/tab-bar4.png">
					<br>我的
				</li>
			</div>
			<div class="tabBarBottom"></div>
		</div>
		<script>
			var header={
		    	app_version:'1.1.1',
		    	app_model:'ios',
		    	token:'066995456465562'
		    }
			var body= "";
			var model ="";
			var jdata="";	
			
				var vm = new Vue({
					el : '#app',
					data : {
						greenHandList:{},
						hotList:[],
						latestList:[],
						greenTags:[]
					
					},
					created : function() {
						this.init();
					},
					methods : {
						init : function(){
							body={
								/* mobile:'17670749126' */
						    }
						    model={
						    	body : body,
						    	header : header,
						    }
						    jdata=JSON.stringify(model);
							$.ajax({
								url: 'notice/getQuick',
								method: 'get',
								data:{
									'data':jdata
								},
								success: function(data){
									 var json=JSON.parse(data);
									 console.log(json);
								},
								error: function(){
									/* alert("数据加载异常!"); */
								}
							});
						}	
					},
					filters : {
						fmtDesc : function(desc){
							
						},
					}
				})
			
				var swiper = new Swiper('.swiper-container', {
				  slidesPerView: 1,
				  spaceBetween: 2,
				  loop: true,
				  pagination: {
				    el: '.swiper-pagination',
				    clickable: true,
				  },
				  navigation: {
				    nextEl: '.swiper-button-next',
					prevEl: '.swiper-button-prev',
				      },
				    }); 
				    
				    
			    $(document).scroll(function(){   //页面加载时，获取滚动条初始高度
				　　var distance = $(document).scrollTop();  //获取滚动条初始高度的值 ：0
				　　if(distance >= 130) {  //当滚动条高度为0时
						$(".headerScherBox").addClass("headerScherBox2").removeClass("headerScherBox");
						$(".headerMsg img").attr("src","resources/images/indexMsg1.png")	
					} else if(distance < 130){
						 $(".headerMsg img").attr("src","resources/images/indexMsg.png")	
					　　　　$(".headerScherBox2").addClass("headerScherBox").removeClass("headerScherBox2");  //添加某某css
					　}
				
				})
		</script>

	</body>

	</html>